<template>
	<view class="p-2">
		<cu-custom :bgcolor="'#fff'" />
		<view class="mt-2 mb-2">
			<uni-datetime-picker v-model="range" type="daterange" @showMask="maskShow" @closeMask="maskClose"
				@change="handlerChange" value-format="yyyy-MM-dd" />
		</view>
		<view style="height: 750rpx" :class="hiddenCanvas ? 'hidden-canvas' : ''">
			<l-echart ref="chart" @finished="init"></l-echart>
		</view>

	</view>
</template>

<script>
	import title from "@/components/common/title.vue"
	import divider from "@/components/common/divider.vue"
	import cuCustom from '@/components/common/custom.vue'

	import interceptor from "@/utils/request.js"
	const echarts = require('../../uni_modules/lime-echart/static/echarts.min');
	import LEchart from "../../uni_modules/lime-echart/components/l-echart/l-echart.vue";
	export default {
		components: {
			title,
			divider,
			cuCustom,
			LEchart
		},
		data() {
			return {
				range: [],
				hiddenCanvas: false,
				allData:[]
			}
		},
		onLoad() {

		},
		mounted() {
			this.getLastMonthDate()
			this.getChartData()
		},
		methods: {
			handlerChange(val) {
				this.hiddenCanvas = false
				this.getChartData()
			},
			maskShow(val) {
				this.hiddenCanvas = true
			},
			maskClose(val) {
				this.hiddenCanvas = false
			},
			getCurrentDate() {
				const today = new Date();
				const year = today.getFullYear();
				const month = today.getMonth() + 1; // 月份是从0开始的
				const day = today.getDate();
				this.range.push(`${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`)

			},
			getLastMonthDate() {
				const today = new Date();
				let month = today.getMonth(); // 获取当前月份
				let year = today.getFullYear(); // 获取当前年份
				let day = today.getDate(); // 获取当前日

				// 如果是1月，则上个月为上一年的12月
				if (month === 0) {
					month = 12;
					year -= 1;
				}

				// 创建上个月的日期对象
				const lastMonthDate = new Date(year, month - 1, day);

				this.range.push(
					`${lastMonthDate.getFullYear()}-${(lastMonthDate.getMonth() + 1).toString().padStart(2, '0')}-${lastMonthDate.getDate().toString().padStart(2, '0')}`
				)


				this.getCurrentDate()

			},
			getChartData(){
				if( Date.parse(this.range[0]) >= Date.parse(this.range[1])){
				      uni.showToast({
				        title: '开始时间不能大于等于结束时间',
				        icon:"none"
				      })
				      return false
				    }
				let params = {
					start: this.range[0],
					end: this.range[1],
				}
				interceptor.get("/supplier_applet_api.php?act=priceIndex", params).then((res) => {
					this.init(res.info)
					this.allData = this.splitData(res.info);
				})
			},
			init(data){
				this.$refs.chart.init(echarts, chart => {
					let upColor = '#ec0000';
					let upBorderColor = '#8A0000';
					let downColor = '#00da3c';
					let downBorderColor = '#008F28';
					
					let option = {
						title: {
							text: '',
							left: 0
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross'
							}
						},
						legend: {
							data: ['二两母蟹', '二两公蟹', '一两母蟹', '一两公蟹'],
							textStyle: {
								fontSize: 12
							}
						},
						grid: {
							top: '20%',
							left: '10%',
							right: '10%',
							bottom: '20%'
						},
						xAxis: {
							type: 'category',
							data: this.allData.categoryData,
							boundaryGap: false,
							axisLine: {
								onZero: false
							},
							splitLine: {
								show: false
							},
							min: 'dataMin',
							max: 'dataMax'
						},
						yAxis: {
							scale: true,
							splitArea: {
								show: true
							}
						},
						dataZoom: [{
								type: 'inside',
								start: 50,
								end: 100
							},
							{
								show: true,
								type: 'slider',
								top: '90%',
								start: 50,
								end: 100
							}
						],
						series: [{
								name: '二两母蟹',
								type: 'line',
								data: this.calculateMA(3)
							},
							{
								name: '二两公蟹',
								type: 'line',
								data: this.calculateMA(2)
							},
							{
								name: '一两母蟹',
								type: 'line',
								data: this.calculateMA(1)
							},
							{
								name: '一两公蟹',
								type: 'line',
								data: this.calculateMA(0)
							}
						]
					}
					chart.setOption(option)
				});
			},
			splitData(rawData) {
				console.log(rawData)
				const categoryData = [];
				const values = [];
				for (var i = 0; i < rawData.length; i++) {
					categoryData.push(rawData[i].splice(0, 1)[0]);
					values.push(rawData[i]);
				}
				return {
					categoryData: categoryData,
					values: values
				};
			},
							
			calculateMA(dayCount) {
				let data = this.allData
				var result = [];
				for (var i = 0, len = data.values.length; i < len; i++) {
					let item = data.values[i]
					if (!item[dayCount]) {
						result.push('-');
						continue;
					}
					result.push(item[dayCount]);
				}
				return result;
			}
		}
	}
</script>

<style scoped lang="scss">
	.search-box {
		width: 100%;
		height: 160upx;
		background: #fff;

		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		.input {
			width: 100%;
			border-radius: 20px;
			overflow: hidden;
			border: 1px solid #BBBBBB;
			position: relative;

			.icon-sousuo {
				position: absolute;
				left: 35upx;
				top: 10upx;
			}

			.search {
				position: absolute;
				right: 40upx;
				top: 8upx;
			}
		}
	}

	.shop-list {
		background: #EBECED;
		height: auto;
		padding: 32rpx;
		box-sizing: border-box;

		.list-box {
			background: #FFFFFF;
			border-radius: 20rpx;
			height: 452rpx;

			.list {
				height: 360rpx;
				border-bottom: 1px dashed #dcdcdc;
			}

			.list-btn {}
		}

	}

	.button-box {
		position: absolute;
		width: 100%;
		bottom: 0;
		background: #fff;
		height: 100rpx;
	}

	.hidden-canvas {
		transform: translateX(200%);
	}
</style>